<script setup lang="ts">
import { reactive, ref, watch, onMounted, computed } from "vue"
import { fetchSelectList, fetchEnumSelectList } from "@/api/common"
import * as JiraApi from "@/api/jira"
import { type JiraData, type JiraImportData } from "@/api/jira/types/jira"
import { type SelectData } from "@/api/common/types/common"
import { type FormInstance, type FormRules, ElMessage, ElMessageBox, TableInstance } from "element-plus"
import { Search, Refresh, Edit, WarningFilled, Close, Brush } from "@element-plus/icons-vue"
import { usePagination } from "@/hooks/usePagination"
import { useTableSort } from "@/hooks/useTableSort"
import { cloneDeep } from "lodash-es"
import { checkPermission } from "@/utils/permission"
import JiraReportDetail from "@/components/report/JiraReportDetail.vue"
import ImportJirasBtn from "@/components/jira/importJirasBtn.vue"
import ImportJiraByDay from "@/components/jira/importJiraByDay.vue"
import ImportJiraByWeek from "@/components/jira/importJiraByWeek.vue"

defineOptions({
  // 命名当前组件
  name: "Jira"
})

const loading = ref<boolean>(false)
const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()
const { sortColumn, sortOrder, handleSortChange } = useTableSort({
  totalUsedTimeHour: "totalUsedTime",
  usedTimeHour: "usedTime",
  subUsedTimeHour: "subUsedTime"
})
const DEFAULT_FORM_DATA = {
  id: 0,
  projectId: 0,
  code: "",
  pcode: "",
  assignee: "",
  reporter: "",
  content: "",
  duration: 0,
  checkResult: "",
  status: "",
  type: ""
}
const dialogVisible = ref<boolean>(false)
const formRef = ref<FormInstance | null>(null)
const formData = ref<JiraData>(cloneDeep(DEFAULT_FORM_DATA))

const jiraTableRef = ref<TableInstance>()

// 修改父组件的 loading 状态
const setLoading = (value: boolean) => {
  loading.value = value
}

const formRules = reactive<FormRules>({
  status: [{ required: true, trigger: "blur", message: "请选择状态" }],
  type: [{ required: true, trigger: "blur", message: "请选择类型" }],
  duration: [{ required: true, trigger: "blur", message: "请输入预计工时" }],
  projectId: [{ required: true, trigger: "blur", message: "请选择项目" }],
  content: [{ required: true, trigger: "blur", message: "请输入内容" }],
  assignee: [{ required: true, trigger: "blur", message: "请输入经办人" }]
})

// 小组下拉框
const groupSelectOptions = ref<SelectData[]>([])
const fetchGroupSelectOptions = async () => {
  const data = await fetchSelectList("group")
  groupSelectOptions.value = data.data
}

const clearPlanDate = (row: JiraData) => {
  JiraApi.clearPlanDate(row.id).then(() => {
    ElMessage.success("操作成功")
    getTableData()
    row.planEndDate = ""
    row.planStartDate = ""
  })
}
const handleCreateOrUpdate = () => {
  formRef.value?.validate((valid: boolean, fields) => {
    if (!valid) return console.error("表单校验不通过", fields)
    if (formData.value === undefined) return
    loading.value = true
    JiraApi.saveJiraDataApi(formData.value)
      .then(() => {
        ElMessage.success("操作成功")
        dialogVisible.value = false
        getTableData()
      })
      .finally(() => {
        loading.value = false
      })
  })
}
const resetForm = () => {
  formRef.value?.clearValidate()
  formData.value = cloneDeep(DEFAULT_FORM_DATA)
}
//#endregion

//#region 删
const handleDelete = (row: JiraData) => {
  const id = row.id
  if (!id) return

  ElMessageBox.confirm(`正在删除不存在的jira：${row.code}，确认删除？`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    JiraApi.deleteJiraDataApi(id).then(() => {
      ElMessage.success("删除成功")
      getTableData()
    })
  })
}
//#endregion

//#region 改
// 修改弹窗是否全屏
const isFullscreen = ref(false)
const fullscreenSvgName = computed(() => (isFullscreen.value ? "fullscreen-exit" : "fullscreen"))
const handleUpdate = (row: JiraData) => {
  dialogVisible.value = true
  isFullscreen.value = false
  formData.value = cloneDeep(row)
}
//#endregion

// 项目下拉框
const projectSelectOptions = ref<SelectData[]>([])
const fetchProjectSelectOptions = async () => {
  const data = await fetchSelectList("project")
  projectSelectOptions.value = data.data
}
//JiraCheckResult下拉框
const jiraCheckResultOptions = ref<SelectData[]>([])
const fetchJiraCheckResultTypeOptions = async () => {
  const data = await fetchEnumSelectList("JiraCheckResult")
  jiraCheckResultOptions.value = data.data
}

//jira 状态下拉框
const jiraStatusOptions = ref<SelectData[]>([])
const fetchJiraStatusOptions = async () => {
  const data = await fetchEnumSelectList("JiraStatus")
  jiraStatusOptions.value = data.data
}

// jira bug 类型下拉框
const jiraBugTypeOptions = ref<SelectData[]>([])
const fetchJiraBugTypeOptions = async () => {
  const data = await fetchEnumSelectList("JiraBugType")
  jiraBugTypeOptions.value = data.data
}

//jira 类型下拉框
const jiraTypeOptions = ref<SelectData[]>([])
const fetchJiraTypeOptions = async () => {
  const data = await fetchEnumSelectList("JiraType")
  jiraTypeOptions.value = data.data
}

// #region 查
const tableData = ref<JiraData[]>([])
const searchFormRef = ref<FormInstance | null>(null)
const searchData = reactive({
  code: "",
  pcode: "",
  type: "",
  typeList: [],
  projectId: undefined,
  status: "",
  statusList: [],
  checkResult: "",
  assignee: "",
  assigneeGroup: undefined,
  overflow: false,
  bugType: ""
})

const getTableData = () => {
  loading.value = true
  JiraApi.getJiraDataApi({
    page: paginationData.currentPage,
    size: paginationData.pageSize,
    sortColumn: sortColumn.value,
    sortOrder: sortOrder.value,
    ...searchData
  })
    .then(({ data }) => {
      paginationData.total = data.total
      tableData.value = data.datas
    })
    .catch(() => {
      tableData.value = []
    })
    .finally(() => {
      loading.value = false
    })
}
const handleSearch = () => {
  paginationData.currentPage === 1 ? getTableData() : (paginationData.currentPage = 1)
}
const resetSearch = () => {
  searchFormRef.value?.resetFields()
  handleSearch()
}
// 定义 bugType 到 tag type 的映射
const bugTypeMap: Record<string, "primary" | "success" | "info" | "warning" | "danger"> = {
  INTERNAL: "primary",
  UAT: "success",
  PRODUCTION: "danger"
}

// 计算属性，根据 bugType 返回对应的 tag type
const getTagType = (bugType: string): "primary" | "success" | "info" | "warning" | "danger" => {
  return bugTypeMap[bugType] || "info"
}
// #endregion

// #region 查看工时详情

// 某个jira 对应的工时详情
const jiraCode = ref("") // 存储传递给子组件的 Jira 号
// 切换抽屉显示状态并传入不同的 Jira Code
const handerShowReportDetail = (code: string) => {
  jiraCode.value = code // 设置传递给子组件的 code
}
//#endregion

//#region 批量修改jira的项目

const updateJiraProjectFormRef = ref<FormInstance>()
const dialogUpdateJiraProjectVisible = ref(false)
// 待导入的jira信息
const updateJiraProjectData = reactive<JiraImportData>({
  projectId: undefined,
  codes: [""]
})
//选择jira事件
const multipleJiraSelection = ref<JiraData[]>([])
const handleSelectionJiraChange = (val: JiraData[]) => {
  multipleJiraSelection.value = val
}
//没有项目的 才能修改所属项目
const selectable = (row: JiraData) => {
  return !row.projectId
}
// 打开 批量修改jira 项目
const handleOpenUpdateJiraProject = () => {
  // 把选中的jira号提取出来
  updateJiraProjectData.codes = multipleJiraSelection.value.map((item) => item.code)
  updateJiraProjectData.projectId = undefined
  dialogUpdateJiraProjectVisible.value = true
}

const handleUpdateJiraProject = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid: boolean, fields) => {
    if (!valid) return console.error("表单校验不通过", fields)
    loading.value = true
    JiraApi.batchUpdateProjectId(updateJiraProjectData)
      .then(({ data }) => {
        ElMessage.success("成功修改" + data + "条jira的所属项目")
        dialogUpdateJiraProjectVisible.value = false
        getTableData()
      })
      .finally(() => {
        loading.value = false
      })
  })
}
//#endregion

// #region 统计全部jira的工时 慎用
const handleSummaryAllJira = () => {
  ElMessageBox.confirm(`将会统计全部jira的工时和子工时，慎用?`, "确认", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    loading.value = true
    JiraApi.summaryAllJiraApi()
      .then(({ data }) => {
        ElMessage.success("统计" + data + "条jira工时信息成功")
        getTableData()
      })
      .finally(() => {
        loading.value = false
      })
  })
}
//#endregion

onMounted(() => {
  fetchProjectSelectOptions()
  fetchJiraCheckResultTypeOptions()
  fetchJiraStatusOptions()
  fetchJiraBugTypeOptions()
  fetchJiraTypeOptions()
  fetchGroupSelectOptions()
})

//#endregion

/** 监听分页参数的变化 */
watch(
  [() => paginationData.currentPage, () => paginationData.pageSize, () => sortColumn.value, () => sortOrder.value],
  getTableData,
  { immediate: true }
)
</script>
<template>
  <div class="app-container">
    <el-card v-loading="loading" shadow="never" class="search-wrapper">
      <el-form ref="searchFormRef" :inline="true" :model="searchData" size="small">
        <el-form-item prop="code" label="Jira号">
          <el-input v-model="searchData.code" placeholder="请输入" />
        </el-form-item>

        <el-form-item prop="pcode" label="父Jira">
          <el-input v-model="searchData.pcode" placeholder="请输入" />
        </el-form-item>

        <el-form-item prop="assignee" label="经办人">
          <el-input v-model="searchData.assignee" placeholder="请输入" />
        </el-form-item>
        <el-form-item prop="assigneeGroup" label="经办人小组">
          <el-select
            v-model="searchData.assigneeGroup"
            clearable
            placeholder="请选择小组"
            style="width: 150px"
            :empty-values="[null]"
          >
            <el-option v-for="item in groupSelectOptions" :key="item.id" :label="item.text" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item prop="projectId" label="所属项目">
          <el-select
            v-model="searchData.projectId"
            clearable
            filterable
            placeholder="请选择项目"
            style="width: 180px"
            :empty-values="[null]"
          >
            <el-option v-for="item in projectSelectOptions" :key="item.id" :label="item.text" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item prop="statusList" label="状态">
          <el-select
            v-model="searchData.statusList"
            clearable
            filterable
            placeholder="请选择jira状态"
            style="width: 180px"
            multiple
            :empty-values="[null]"
          >
            <el-option v-for="item in jiraStatusOptions" :key="item.id" :label="item.text" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item prop="typeList" label="任务类型">
          <el-select
            v-model="searchData.typeList"
            clearable
            filterable
            placeholder="请选择任务类型"
            style="width: 180px"
            multiple
            :empty-values="[null]"
          >
            <el-option v-for="item in jiraTypeOptions" :key="item.id" :label="item.text" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item prop="bugType" label="bug类型">
          <el-select
            v-model="searchData.bugType"
            clearable
            filterable
            placeholder="请选择bug类型"
            style="width: 150px"
            :empty-values="[null]"
          >
            <el-option v-for="item in jiraBugTypeOptions" :key="item.id" :label="item.text" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item prop="overflow" label="">
          <el-checkbox label="工时已超额" v-model="searchData.overflow" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
          <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card v-loading="loading" shadow="never">
      <div class="toolbar-wrapper">
        <div>
          <!-- <el-button type="primary" :icon="CirclePlus" @click="openImportJira">导入jira号</el-button> -->
          <!--导入jira号 -->
          <ImportJirasBtn @set-loading="setLoading" @operation-complete="getTableData" />
          <!-- 按照日期导入jira号 -->
          <ImportJiraByDay
            @set-loading="setLoading"
            @operation-complete="getTableData"
            v-if="checkPermission(['admin', 'manager', 'team'])"
          />
          <!-- 按照周导入jira号 -->
          <ImportJiraByWeek
            @set-loading="setLoading"
            @operation-complete="getTableData"
            v-if="checkPermission(['admin'])"
          />

          <el-divider direction="vertical" />
          <el-button
            type="warning"
            size="small"
            :icon="Edit"
            :loading="loading"
            @click="handleOpenUpdateJiraProject"
            v-permission="['admin', 'manager']"
            :disabled="multipleJiraSelection.length === 0"
            >修改所属项目</el-button
          >

          <el-button
            type="danger"
            size="small"
            :icon="WarningFilled"
            :loading="loading"
            @click="handleSummaryAllJira"
            v-permission="['admin']"
            >统计工时</el-button
          >
        </div>
        <div>
          <!-- <el-tooltip content="下载">
            <el-button type="primary" :icon="Download" circle />
          </el-tooltip> -->
          <!-- <el-tooltip content="刷新当前页">
            <el-button type="primary" :icon="RefreshRight" circle @click="getTableData" />
          </el-tooltip> -->
        </div>
      </div>
      <div class="table-wrapper">
        <el-table
          :data="tableData"
          size="small"
          stripe
          border
          ref="jiraTableRef"
          @selection-change="handleSelectionJiraChange"
          @sort-change="handleSortChange"
        >
          <el-table-column
            type="selection"
            :selectable="selectable"
            width="40"
            align="center"
            v-if="checkPermission(['admin', 'manager'])"
          />

          <!-- <el-table-column type="selection" width="50" align="center" /> -->
          <el-table-column
            prop="code"
            label="jira"
            fixed
            header-align="center"
            align="left"
            width="125"
            sortable="custom"
          >
            <template #default="scope">
              <el-tooltip
                class="box-item"
                effect="dark"
                content="查看工时详情, 将进行一次工时统计"
                placement="top"
                :hide-after="0"
              >
                <el-button type="primary" text size="small" @click="handerShowReportDetail(scope.row.code)">{{
                  scope.row.code
                }}</el-button>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="pcode" label="父jira" header-align="center" align="left" width="125" sortable="custom">
            <template #default="scope">
              <el-tooltip
                class="box-item"
                effect="light"
                content="查看工时详情, 将进行一次工时统计"
                placement="top"
                :hide-after="0"
              >
                <el-button type="primary" text size="small" @click="handerShowReportDetail(scope.row.pcode)">{{
                  scope.row.pcode
                }}</el-button>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            prop="projectName"
            label="所属项目"
            header-align="center"
            align="left"
            width="130"
            sortable="custom"
            show-overflow-tooltip
          />
          <!-- <el-table-column prop="settleYear" label="结算年度" align="center" width="75" /> -->
          <el-table-column prop="durationHour" label="预计工时" align="center" width="75" />
          <el-table-column label="已用工时(Hour)" align="center" label-class-name="text-red">
            <el-table-column
              prop="totalUsedTimeHour"
              label="总计"
              align="center"
              width="80"
              sortable="custom"
              label-class-name="text-fuchsia-600 text-blob"
            />
            <el-table-column prop="usedTimeHour" label="自身" align="center" width="75" sortable="custom">
              <template #default="scope">
                <el-tag v-if="scope.row.usedTimeHour > scope.row.durationHour" :type="'danger'" effect="light">
                  {{ scope.row.usedTimeHour }}
                </el-tag>
                <template v-else>
                  {{ scope.row.usedTimeHour }}
                </template>
              </template>
            </el-table-column>
            <el-table-column prop="subUsedTimeHour" label="子任务" align="center" width="80" sortable="custom" />
          </el-table-column>
          <el-table-column prop="status" label="状态" align="center" sortable="custom" />
          <el-table-column prop="assignee" label="经办人" align="center" width="75" />
          <el-table-column
            prop="type"
            label="类型"
            header-align="center"
            align="left"
            width="75"
            show-overflow-tooltip
          />
          <el-table-column prop="groupName" label="bug类型" align="center">
            <template #default="scope">
              <el-tag :type="getTagType(scope.row.bugType)" round>
                {{ scope.row.bugTypeText ? scope.row.bugTypeText : "无" }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="versionName"
            label="修复版本"
            header-align="center"
            align="left"
            width="120"
            show-overflow-tooltip
          />
          <el-table-column
            prop="content"
            label="内容"
            header-align="center"
            align="left"
            width="180"
            show-overflow-tooltip
          />

          <el-table-column prop="planStartDate" label="计划开始时间" align="center" width="95" show-overflow-tooltip />
          <el-table-column prop="planEndDate" label="计划结束时间" align="center" width="95" />
          <el-table-column prop="actualCompleteDate" label="实际结束时间" align="center" width="95" />

          <el-table-column prop="creadted" label="创建时间" align="center" width="95" show-overflow-tooltip />
          <el-table-column prop="releaseDate" label="修复日期" align="center" />
          <el-table-column prop="reporter" label="报告人" align="center" />
          <!-- <el-table-column prop="checkResult" label="检测结果" align="center" width="75" /> -->
          <el-table-column fixed="right" label="操作" width="70" align="center">
            <template #default="scope">
              <el-button type="primary" text bg size="small" @click="handleUpdate(scope.row)">修改</el-button>
              <el-button
                type="danger"
                v-if="scope.row.checkResult === 'notExist'"
                text
                bg
                size="small"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pager-wrapper">
        <el-pagination
          background
          :layout="paginationData.layout"
          :page-sizes="paginationData.pageSizes"
          :total="paginationData.total"
          :page-size="paginationData.pageSize"
          :currentPage="paginationData.currentPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <!--修改 -->

    <el-dialog
      v-model="dialogVisible"
      :title="`编辑Jira: ${formData.code}`"
      @closed="resetForm"
      width="50%"
      :fullscreen="isFullscreen"
      :show-close="false"
    >
      <!-- 自定义标题样式 -->
      <template #header>
        <div style="display: flex; align-items: center; justify-content: space-between">
          <div style="display: flex; align-items: center">
            <el-icon style="margin-right: 8px">
              <Edit />
            </el-icon>
            <span style="font-size: 18px; font-weight: bold">编辑Jira: {{ formData.code }}</span>
          </div>
          <!-- 右侧按钮组 -->
          <div style="display: flex; align-items: center">
            <!-- 全屏按钮 -->
            <el-button type="text" @click="isFullscreen = !isFullscreen">
              <SvgIcon :name="fullscreenSvgName" class="svg-icon" />
            </el-button>
            <!-- 自定义关闭按钮 -->
            <el-button type="text" @click="dialogVisible = false" :icon="Close" />
          </div>
        </div>
      </template>
      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" label-position="right">
        <!-- 父 Jira 和所属项目 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="pcode" label="父jira" label-width="100px">
              <el-input v-model="formData.pcode" placeholder="请输入父jira" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="projectId" label="所属项目" label-width="100px">
              <el-select v-model="formData.projectId" clearable filterable placeholder="请选择项目">
                <el-option v-for="item in projectSelectOptions" :key="item.id" :label="item.text" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 状态和任务类型 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="status" label="状态" label-width="100px">
              <el-select v-model="formData.status" clearable placeholder="请选择状态">
                <el-option v-for="item in jiraStatusOptions" :key="item.id" :label="item.text" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="type" label="任务类型" label-width="100px">
              <el-select v-model="formData.type" clearable placeholder="请选择任务类型">
                <el-option v-for="item in jiraTypeOptions" :key="item.id" :label="item.text" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- Bug 类型和经办人 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="bugType" label="Bug类型" label-width="100px">
              <el-select v-model="formData.bugType" clearable placeholder="请选择Bug类型">
                <el-option v-for="item in jiraBugTypeOptions" :key="item.id" :label="item.text" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="assignee" label="经办人" label-width="100px">
              <el-input v-model="formData.assignee" placeholder="请输入经办人" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 计划开始时间和计划结束时间 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="planStartDate" label="计划开始时间" label-width="100px">
              <el-date-picker
                v-model="formData.planStartDate"
                type="date"
                placeholder="计划开始时间"
                value-format="YYYY-MM-DD"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="planEndDate" label="计划结束时间" label-width="100px">
              <el-date-picker
                v-model="formData.planEndDate"
                type="date"
                placeholder="计划结束时间"
                value-format="YYYY-MM-DD"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 实际完成时间和预计工时 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="actualCompleteDate" label="实际完成时间" label-width="100px">
              <el-date-picker
                v-model="formData.actualCompleteDate"
                type="date"
                placeholder="实际完成时间"
                value-format="YYYY-MM-DD"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="duration" label="预计工时" label-width="100px">
              <el-input-number
                v-model="formData.durationHour"
                :min="1"
                :max="16000"
                :step="0.5"
                step-strictly
                placeholder="单位:小时"
                style="width: 100%"
              >
                <template #suffix>
                  <span>小时</span>
                </template>
              </el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- Jira 内容 -->
        <el-form-item prop="content" label="jira内容" label-width="100px">
          <el-input
            v-model="formData.content"
            style="width: 100%"
            :rows="4"
            type="textarea"
            placeholder="请输入jira内容"
          />
        </el-form-item>
      </el-form>

      <!-- 底部按钮 -->
      <template #footer>
        <el-button
          @click="clearPlanDate(formData)"
          type="warning"
          :icon="Brush"
          :disabled="!formData.planStartDate && !formData.planEndDate"
          >清空计划时间</el-button
        >
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleCreateOrUpdate" :loading="loading">确认</el-button>
      </template>
    </el-dialog>
    <!--修改 end-->

    <!-- 批量修改jira的所属项目 弹框  start -->
    <el-dialog
      v-model="dialogUpdateJiraProjectVisible"
      title="批量修改jira所属项目"
      @closed="dialogUpdateJiraProjectVisible = false"
      width="35%"
    >
      <el-form ref="updateJiraProjectFormRef" :model="updateJiraProjectData" label-width="auto" label-position="left">
        <el-form-item
          prop="projectId"
          label="所属项目"
          :rules="[
            {
              required: true,
              message: '项目必填',
              trigger: ['blur', 'change']
            }
          ]"
        >
          <el-select v-model="updateJiraProjectData.projectId" clearable filterable placeholder="请选择项目">
            <el-option v-for="item in projectSelectOptions" :key="item.id" :label="item.text" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-table :data="multipleJiraSelection" style="width: 100%" border stripe size="small" height="300">
          <el-table-column prop="code" label="待修改的jira号" />
        </el-table>
      </el-form>
      <template #footer>
        <el-button @click="dialogUpdateJiraProjectVisible = false">取消</el-button>
        <el-button type="primary" @click="handleUpdateJiraProject(updateJiraProjectFormRef)">确认</el-button>
      </template>
    </el-dialog>
    <!-- 批量修改jira的所属项目 弹框  end -->

    <!-- jira 工时详情抽屉组件 -->
    <JiraReportDetail
      :code="jiraCode"
      @cleanCode="
        (newCode: string) => {
          jiraCode = newCode
        }
      "
    />
  </div>
</template>

<style lang="scss" scoped>
.search-wrapper {
  margin-bottom: 20px;

  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}

.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.table-wrapper {
  margin-bottom: 20px;
}

.pager-wrapper {
  display: flex;
  justify-content: flex-end;
}

.svg-icon {
  filter: brightness(0);
  font-size: 1em;
}
</style>
